input[type="radio"]:checked + span,
input[type="checkbox"]:checked + span {
  font-weight: 700;
}

.custom-select {
  display: block;
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 5px;	
  color: #444;
}

/* Custom-styled select */
.custom-select {
  position: relative;
  display: block;
  background: #fff;
}

/* For the select element itself we negate every style except the text so we can see the button styles in the wrapper */
.custom-select select {
  width: 100%;
  margin: 0;
  outline: none;
  background: none;
  border: 0;
  padding: 10px 15px;
/* prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
/* remove select styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.custom-select option {
  font-weight: normal;
}

/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
.custom-select:after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top: -4px;
  background-size: 100%;
  z-index: 2;
/* make the select behind the arrow clickable in some browsers */
  pointer-events: none;
}

/* IE 10/11+ */
/* Hide the native dropdown button arrow so it will have the custom appearance (IE 9 and earlier get a native select) */
_:-ms-input-placeholder, :root .custom-select select::-ms-expand {
  display: none;
}
/* Remove the odd blue bg color behind the text */
_:-ms-input-placeholder, :root .custom-select select:focus::-ms-value {
  background: transparent;
}

/* Firefox >= 2 
Older versions of FF (v2 - 6) won't let us hide the native select arrow, so we'll just hide the custom icon and go with native styling */
/* Show only the native arrow */
body:last-child .custom-select:after, x:-moz-any-link {
  display: none;
}
/* Reduce padding */
body:last-child .custom-select select, x:-moz-any-link {
  padding-right: .8em;
}

/* Firefox 7+
Will let us hide the arrow, but inconsistently (see FF 30 comment below). We've found the simplest way to hide the native styling in FF is to make the select bigger than its container. */
/* The specific FF selector used below successfully overrides the previous rule that turns off the custom icon; other FF hacky selectors we tried, like `*>.custom-select:after`, did not undo the previous rule */
/* Show only the custom icon */
_::-moz-progress-bar, body:last-child .custom-select:after {
  display: block;
}    
_::-moz-progress-bar, body:last-child .custom-select select {
/* increase padding to make room for menu icon */
  padding-right: 1.9em;
/* `window` appearance with these text-indent and text-overflow values will hide the arrow FF up to v30 */
  -moz-appearance: window;
  text-indent: 0.01px;
  text-overflow: "";
/* for FF 30+ on Windows 8, we need to make the select a bit longer to hide the native arrow */
  width: 110%;
}
/* hide container overflow */
_::-moz-progress-bar, body:last-child .custom-select {
  overflow: hidden;
}

/* Firefox 7+ focus style
This works around the issue that -moz-appearance: window  kills the normal select focus. Using semi-opaque because outline doesn't handle rounded corners */
_::-moz-progress-bar, body:last-child .custom-select select:focus {
  outline: 2px solid rgba(180,222,250, .7);
}

/* Opera - Pre-Blink nix the custom arrow, go with a native select button */
x:-o-prefocus, .custom-select:after {
  display: none;
}

/* Firefox: remove weird focus artifact around the text */
.custom-select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
